<template>
  <a-spin :spinning="!showLogin" tip="授权中..." size="large" :delay="200" wrapperClassName="spin-container">
    <div class="container">
      <!-- <img class="login-logo" src="static/img/login-logo.png" alt="" /> -->
      <div class="content">
        <!-- <component :is="componentName" @regist="handleRegist" class="main-content"></component> -->
        <div :class="showLogin ? 'main-content main-content--opacity' : 'main-content'">
          <login ref="login" @showLogin="showLogin = true" />
        </div>
      </div>
      <global-footer :copyright="copyright" />
    </div>
  </a-spin>
</template>

<script>
import GlobalFooter from '../common/GlobalFooter';
import Login from './Login';
// import Regist from './Regist';

export default {
  name: 'Common',
  components: { GlobalFooter, Login },
  beforeRouteEnter(to, from, next) {
    // debugger;
    console.warn(to, from, next);
    if (from.path !== '/') {
      // 从系统内部退出时，触发的事件
      next(vm => {
        vm.showLogin = true;
      });
    } else {
      // 授权失败
      next(vm => {
        vm.$refs['login'].getSSO();
      });
    }
  },
  data() {
    return {
      componentName: 'Login',
      showLogin: false
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
    copyright() {
      return this.$store.state.setting.copyright;
    }
  },
  methods: {
    handleRegist(val) {
      this.componentName = val;
    }
  }
};
</script>

<!-- <style lang="less">
body {
  // background: #f0f2f5 url('~TestStatic/img/login-back.png') no-repeat center 110px;
  background: #f0f2f5 url('~TestStatic/img/login-back.png') no-repeat;
  background-size: 100%;
}
</style> -->
<style lang="less">
.spin-container {
  height: 100%;
  .ant-spin-container {
    height: 100%;
  }
}
</style>
<style lang="less" scoped>
@baseWidth: 1366;

.container {
  background: #002462 url('~TestStatic/img/login-back.jpg') no-repeat;
  background-position-y: bottom;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  .login-logo {
    float: left;
    width: 8rem;
    // height: 2.35rem;
    margin-top: 40px;
    margin-left: 50px;
  }
  .content {
    // padding: 32px 0;
    flex: 1;
    display: flex;
    padding-top: 20vh;
    @media (min-width: 768px) {
      // padding: 116px 0 10px;
    }
    .top {
      text-align: center;
      .header {
        height: 50px;
        line-height: 50px;
        a {
          text-decoration: none;
        }
        .logo {
          /* width: 40px;
          height: 19px; */
          vertical-align: center;
          // margin-right: 16px;
        }
        .title {
          font-size: 28px;
          color: rgba(0, 0, 0, 0.85);
          // font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
          // font-family: 'SourceHanSansCNRegular';
          font-weight: 600;
          position: relative;
          top: 6px;
        }
      }
      .desc {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 12px;
        margin-bottom: 40px;
      }
    }
    .main-content {
      opacity: 0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: baseline;
      transition-property: opacity;
      transition-duration: 1s;
      @media screen and (max-width: 576px) {
        width: 95%;
      }
      @media screen and (max-width: 320px) {
        .captcha-button {
          font-size: 14px;
        }
      }
    }
    .main-content--opacity {
      opacity: 1;
    }
  }
}
</style>
